<template>
  <div class="container">
        <li>
            <!-- <div class="guanggao"><img src="./images/guanggao.png" alt=""></div> -->
            <div class="swiper-container case1">
                 <div class="swiper-wrapper">
                    <div class="swiper-slide" id="gg" v-for="(ad , i) in adv" :key="i"><img :src="ad"/></div>
                 </div>
                 <!-- 如果需要分页器 -->
                 <div class=" mysw1 swiper-pagination"></div>
            </div>
            <!-- 分类 -->
            <div class="swiper-container case2">
                <div class="swiper-wrapper">
                     <div class="swiper-slide" id="gimg">
                      <div v-for="sort_1 in sort_1" :key="sort_1"><img :src="sort_1"><p>精  品</p></div>
                    </div>
                    <div class="swiper-slide" id="gimg">
                      <div v-for="sort_2 in sort_2" :key="sort_2"><img :src="sort_2"><p>精  品</p></div>
                    </div>
                </div>
              <div class="swiper-pagination"></div>
            </div>
            <Bookfree/>
            <Booknew/>
        </li>

        </div><!-- container-->
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import Bookfree from '../components/Book/Bookfree'
import Booknew from '../components/Book/Booknew'
export default {
  data () {
    return {
      adv: [
        require('../../static/adv/guanggao.png'),
        require('../../static/adv/guanggao.png'),
        require('../../static/adv/guanggao.png'),
        require('../../static/adv/guanggao.png')
      ],
      sort_1: [
        require('../../static/sort/精.png'),
        require('../../static/sort/免.png'),
        require('../../static/sort/男.png'),
        require('../../static/sort/女.png'),
        require('../../static/sort/完.png'),
        require('../../static/sort/限免.png'),
        require('../../static/sort/玄币.png'),
        require('../../static/sort/历史.png')
      ],
      sort_2: [
        require('../../static/sort/精.png'),
        require('../../static/sort/免.png'),
        require('../../static/sort/男.png'),
        require('../../static/sort/女.png'),
        require('../../static/sort/完.png'),
        require('../../static/sort/限免.png')
      ]
    }
  },
  mounted () {
    // 创建一个swiper实例
    // eslint-disable-next-line no-unused-vars
    var mysw2 = new Swiper('.case2', {
      loop: true,
      pagination: {
        el: '.swiper-pagination'
      }
    })

    // eslint-disable-next-line no-unused-vars
    var mysw1 = new Swiper('.case1', {
      direction: 'horizontal', // 垂直切换选项

      loop: true, // 循环模式选项
      // 如果需要前进后退按钮
      // 控制左右按钮
      navigation: {
        nextEl: '.swiper-button-next',
        // 对应左边按钮类名
        prevEl: '.swiper-button-prev'
        // 对应右边按钮类名
      },
      // 自动轮播
      autoplay: {
        delay: 3000,
        // 控制时间
        // disableOnInteraction: true
        disableOnInteraction: false
      },
      effect: 'coverflow',
      // 控制翻滚动效
      pagination: {
        el: '.swiper-pagination',
        // 点标记
        dynamicBullets: true,
        dynamicMainBullets: 2
      }
    })
  },
  //
  components: {
    Bookfree,
    Booknew
  }
}
</script>
<style scoped>
.container li{
    margin-top: 40px
}
#gg img{
    width: 100%;
    height: 120px;
}
.mysw1{
   position: absolute;
        top:80%;
        left: 70%!important;
}
/* 分类 */
.container{
    padding-top: 5px;
    width: 95%;
    margin: 0 auto;
    position: relative;
    margin-bottom: 70px;
    z-index: 1;
    /* background-color: rgba(204, 204, 204, 0.1); */
}
.guanggao img{
    width: 100%;
    margin-bottom: 10px;
    margin-top: -5px
}
.swiper-container{
  background-color: rgba(204, 204, 204, 0.1);
  border-radius: 4px
}
.swiper-wrapper{
    height: 150px;
}
.swiper-slide{
    padding: 10px 0 10px 0;
    width: 98%;
    height: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content:left;
    text-align: center;
}
.swiper-slide div{
    width: 22%;
    height: 40%;
    margin-bottom: 15px;
    margin-left: 5px;
}
.swiper-slide p{
    font-size: 14px
}
#gimg img{
    width: 52%;
    height: 52%;
}
.booksite img{
    width: 100%;
    height: 100%;
}

</style>
